<template>  
  <div id="myself">
    <header>
        <i class="iconfont">&#xe61f;</i>
        <h1>登录</h1>
        <div>立即注册</div>
    </header>
    <div class="tab">
        <router-link active-class="z-act" to='/myself/shouji'><span>手机验证登录</span></router-link>
        <router-link active-class="z-act" to='/myself/zhanghao'><span>美团账号登录</span></router-link>
    </div>
    <router-view></router-view>
    <Footerr></Footerr>
  </div>
  
</template>
<script>
import { mapState, mapMutations } from 'vuex'
 import Footerr from './Footerr'
export default {
    components:{
        Footerr,
    }
 
}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
#myself{
    text-align: center;
}
header{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: px2rem(102);
    border-bottom: px2rem(4) solid #ccc;
    display: flex;
    justify-content: space-around;
    background: #fff;
    align-items: center;
    i{
        font-size: px2rem(38);
        margin-left: px2rem(-55);
    }
    h1{
        font-size: px2rem(45);
        font-weight: 300;
        color: #444;
        margin-right: px2rem(-35);
    }
    div{
        font-size: px2rem(30);
        color: #656565;
        margin-right: px2rem(-78);
    }
}
.tab{
    height: px2rem(80);
    width: 100%;
    display: flex;
    justify-content: space-around;
    a:nth-child(1){
        border-left: none;
    }
    a:nth-child(2){
        border-right: none;
    }
    a{
        height: px2rem(80);
        display: inline-block;
        border: px2rem(2) solid #ccc;
        width: 100%; 
        font-size: px2rem(30);
        align-items: center;
        line-height: px2rem(80);
        color: inherit;
    }
    .z-act{
    background: #fff;
    border-bottom: none;
}
}
router-view{
    width: 100%;
    height: 100%;
}


</style>

